<template>
    <div class="px-[5px] box-border flex flex-wrap justify-center">
    <span v-for="(item, index) in itemList" :key="index" class="item w-[120px] inline-block relative mb-[10px]">
    <a :href="item.path"><img :src="item.url.src" class="w-[120px] h-[112px] rounded-[2px]" />
    <span class="des">{{ item.CH }}</span></a>
    </span>
    </div>
    </template>
    <script  setup>
    import AI人工智能 from "@assets/programmer/AI人工智能.png"
    import 光通信 from "@assets/programmer/光通信.png"
    import 医疗 from "@assets/programmer/医疗.png"
    import 工业仪器2 from "@assets/programmer/工业仪器2.png"
    import 数据中心1 from "@assets/programmer/数据中心1.png"
    import 汽车电子 from "@assets/programmer/汽车电子.png"
    import 电力电网 from "@assets/programmer/电力电网.png"
    import 轨道交通 from "@assets/programmer/轨道交通.png"
    const itemList= [
    {
        CH: '汽车电子',
        url: 汽车电子,
        path:'/automotiveElectronics'
    },
    {
        CH: '工业设备',
        url: 工业仪器2
    },
    {
        CH: '数据中心',
        url: 数据中心1
    },
    {
        CH: '光模块',
        url: 光通信
    },
    {
        CH: 'AI人工智能',
        url: AI人工智能
    },
    {
        CH: '轨道交通',
        url: 轨道交通
    },
    {
        CH: '电力电网',
        url: 电力电网
    },
    {
        CH: '医疗设备',
        url: 医疗
    }]
</script>
<style  lang="scss" scoped>
.des{
width: 100%;
height: 22px;
border-radius: 0px 0px 2px 2px;
opacity: 0.6;
background: #D8D5D5;
display: inline-block;
text-align: center;
position: absolute;
bottom: 0;
font-family: Source Han Sans;
font-size: 14px;
font-weight: normal;
line-height: normal;
letter-spacing: 0em;
color: #333333;
	
}
.item{
&:hover{
 box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
.des{
    opacity: 0.6;
color: #fff;
background: #712C2F;

}
}
&:nth-of-type(2n-1){
    margin-right: 10px;
}
}
</style>
